<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>地区列表</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div style="padding: 0 15px;">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>地区列表</legend>
        </fieldset>

        <a href="javascript:void(0)" id="addTopic" type="button" class="layui-btn" style="border-radius: 5px;">添加</a>

        <table class="layui-table" lay-skin="line">
            <colgroup>
                <col width="150">
                <col width="150">
                <col width="200">
                <col>
            </colgroup>
            <thead>
            <tr>
                <th>ID</th>
                <th>地区</th>
            </tr>
            </thead>
            <tbody>
            {{range .list}}
                <tr>
                    <td>{{.Id}}</td>
                    <td>{{.Name}}</td>
                </tr>
            {{end}}
            </tbody>
        </table>
    </div>
</div>
<script src="/static/layui/layui.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script>
    layui.use(['form'], function(){
        $("body").on("click", "#addTopic", function () {
            layer.open({
                type: 2,
                title: false,
                closeBtn: 0,
                shade: [0.3],
                shadeClose: true,
                area: ['30%', '30%'],
                anim: 1,
                content: ['/area/add', 'yes'], //iframe的url，no代表不显示滚动条
            });
        })
    })
</script>
</body>
</html>